import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';
import qs from 'qs';

import { addTab } from '@/utils/utils';
import PageHeader from '@/components/PageHeader';

import { Card, Table } from 'antd';

import { TableListData } from './data';

const { pathname } = window.location;

interface TableProps {
  dispatch: Dispatch;
  loading: boolean;
  dataInfo: TableListData;
  location: { query: any };
}

interface TableState {
  searchValues: any;
  rowId:number;
}

@connect(({
  mouthDetailsLogs: { dataInfo },
  loading,
}: any) => ({
  dataInfo,
  loading: loading.effects['mouthDetailsLogs/fetch'],
}))

class TableElemInfo extends Component<TableProps, TableState> {
  columns = [
    { title: '序号', dataIndex: 'index' },
    { title: '柜体ID', dataIndex: 'cabinetId' },
    { title: '格口ID', dataIndex: 'cellId' },
    { title: '业务类型', dataIndex: 'referTypeName' },
    { title: '业务订单ID', dataIndex: 'referId' },
    { title: '运单号', dataIndex: 'expCode' },
    { title: '格口状态', dataIndex: 'statusName' },
    { title: '操作来源', dataIndex: 'sourceName' },
    { title: '备注', dataIndex: 'remark' },
    { title: '创建时间', dataIndex: 'createTime', width: 200 },
  ];

  state: TableState = {
    rowId: 0,
    searchValues: {
      pageIndex: 1,
      pageSize: 20,
    },
  };

  static getDerivedStateFromProps(nextProps: any, pervState: any) {
    const { location: { query } } = nextProps;
    if (query && query.cabId && query.cellId) {
      return {
        searchValues: {
          ...query,
          pageIndex: Number(query.pageIndex) || 1,
          pageSize: Number(query.pageSize) || 20,
        },
      };
    }
    return null;
  }

  componentDidMount() {
    this.fetchDataValues();
  }

  componentDidUpdate(prevProps: any, prevState: any) {
    const { searchValues } = this.state;
    if (!_.isEqual(searchValues, prevState.searchValues)) {
      this.fetchDataValues();
    }
  }

  componentWillUnmount() {
    this.fetchAction('clear');
  }

  fetchDataValues = () => {
    const { searchValues } = this.state;
    const { cellCode, ...query } = searchValues;
    this.fetchAction('fetch', query);
  };

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { searchValues } = this.state;
    const params = {
      ...searchValues,
      pageIndex,
      pageSize,
    };
    const { dispatch } = this.props;
    addTab(dispatch, {
      name: `格口${params.cellCode}日志`,
      url: `${pathname}?${qs.stringify(params)}`,
      isTopMenu: true,
    });
  };

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    const type = `mouthDetailsLogs/${typeName}`;
    dispatch({ type, payload });
  };

  render() {
    const {
      searchValues: { pageIndex, pageSize },
    } = this.state;
    const { dataInfo, loading } = this.props;

    const dataSource = dataInfo
      ? dataInfo.list.map((item: any, index: number) => ({
        ...item,
        index: index + 1,
      }))
      : [];
    const pagination: object = {
      total: dataInfo ? dataInfo.count : 0,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: () => `共${dataInfo.count || 0}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    return (
      <Fragment>
        <PageHeader />

        <Card
          bordered={false}
          className="tableList"
          title="格口操作日志"
        >
          <Table
            rowKey="id"
            tableLayout="fixed"
            className="statementTable tableHeight60"
            columns={this.columns}
            dataSource={dataSource}
            pagination={pagination}
            loading={loading}
            scroll={{ x: 1400 }}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
          />
        </Card>
      </Fragment>
    );
  }
}

export default TableElemInfo;
